<template>
   <div>
      <!-- 商品列表 -->
      <div class="likeList" v-show="showLikeList">
         <!-- 添加按钮 -->
         <el-button type="primary" icon="el-icon-plus" style="margin-bottom:20px" @click="addShopList">添加</el-button>
         <!-- 表格 -->
         <el-table :data="likeList" stripe style="width: 100%; margin-bottom:20px" :highlight-current-row="true">
            <el-table-column type="index" label="序号" width="100" align="center">
            </el-table-column>
            <el-table-column prop="shopName" label="商品名称">
            </el-table-column>
            <el-table-column label="商品图片">
               <template slot-scope="{row}">
                  <div>
                     <img :src="row.defaultPic" height="100px">
                  </div>
               </template>
            </el-table-column>
            <el-table-column prop="dealGroupTitle" label="商品简介">
            </el-table-column>
            <el-table-column label="操作">
               <template slot-scope="{row}">
                  <el-tooltip class="item" effect="dark" content="添加商品详情" placement="top">
                     <el-button type="primary" size="mini" icon="el-icon-plus" @click="addShopDetail(row.id)">添加详情</el-button>
                  </el-tooltip>
                  <el-tooltip class="item" effect="dark" content="修改" placement="top">
                     <el-button type="warning" size="mini" icon="el-icon-edit" @click="changeShop(row)">修改</el-button>
                  </el-tooltip>
                  <el-tooltip class="item" effect="dark" content="删除" placement="top">
                     <el-button type="danger" size="mini" icon="el-icon-delete" @click="delShop(row.id)">删除</el-button>
                  </el-tooltip>
               </template>
            </el-table-column>
         </el-table>
         <!--对话框-->
         <el-dialog :title="`${shopFormData.id?'修改':'添加'}商品`" :visible.sync="dialogFormVisible">
            <el-form :model="shopFormData" style="width:80%" ref="shopFormData">
               <!--商品名称-->
               <el-form-item label="商品名称" :label-width="formLabelWidth" prop="shopName">
                  <el-input v-model="shopFormData.shopName" autocomplete="off"></el-input>
               </el-form-item>
               <!--商品图片-->
               <el-form-item label="商品图片" :label-width="formLabelWidth" prop="defaultPic">
                  <el-upload class="avatar-uploader" action="/dev-api/admin/product/fileUpload" :show-file-list="false" :on-success="handleAvatarSuccess">
                     <img v-if="shopFormData.defaultPic" :src="shopFormData.defaultPic" class="avatar">
                     <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                     <div class="el-upload__tip" slot="tip"></div>
                  </el-upload>
               </el-form-item>
               <!-- 商品简介 -->
               <el-form-item label="商品简介" :label-width="formLabelWidth" prop="dealGroupTitle">
                  <el-input v-model="shopFormData.dealGroupTitle" autocomplete="off"></el-input>
               </el-form-item>
               <!-- 商品现价 -->
               <el-form-item label="商品现价" :label-width="formLabelWidth" prop="dealgroupPrice">
                  <el-input v-model="shopFormData.dealgroupPrice" autocomplete="off"></el-input>
               </el-form-item>
               <!-- 商品原价 -->
               <el-form-item label="商品原价" :label-width="formLabelWidth" prop="marketPrice">
                  <el-input v-model="shopFormData.marketPrice" autocomplete="off"></el-input>
               </el-form-item>
               <!-- 已售 -->
               <el-form-item label="已售" :label-width="formLabelWidth" prop="salesdesc">
                  <el-input v-model="shopFormData.salesdesc" autocomplete="off"></el-input>
               </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
               <el-button @click="dialogFormVisible = false">取 消</el-button>
               <el-button type="primary" @click="handleAddShopList">确 定</el-button>
            </div>
         </el-dialog>
         <!--分页器-->
         <el-pagination @size-change="handleSizeChange" @current-change="getLikeList" :current-page="page" :page-sizes="[3,6, 9, 12]" :page-size="pageSize" layout="prev, pager, next, jumper,->,sizes,total" :total="total" style="text-align:center">
         </el-pagination>
      </div>
      <!-- 商品详情 -->
      <div class="likeDetail" v-show="!showLikeList">
         <el-form ref="form" :model="shopDetailFormData" label-width="80px">
            <!-- 商品名称 -->
            <el-form-item label="商品名称">
               <el-input v-model="shopDetailFormData.title"></el-input>
            </el-form-item>
            <!-- 商品封面 -->
            <el-form-item label="商品封面">
               <el-upload class="avatar-uploader" action="/dev-api/admin/product/fileUpload" :show-file-list="false" :on-success="imageSuccess">
                  <img v-if="shopDetailFormData.defaultPic" :src="shopDetailFormData.defaultPic.imgUrl" class="avatar">
                  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
               </el-upload>
            </el-form-item>
            <!-- 商品图片 -->
            <el-form-item label="商品图片">
               <el-upload action="/dev-api/admin/product/fileUpload" list-type="picture-card" :on-preview="handlePictureCardPreview" :on-remove="handleRemove" :on-success="likeDetailSuccess" :file-list="imgList" multiple>
                  <i class="el-icon-plus"></i>
               </el-upload>
               <el-dialog :visible.sync="dialogVisible">
                  <img width="100%" :src="dialogImageUrl" alt="">
               </el-dialog>
            </el-form-item>
            <!-- 店铺名称 -->
            <el-form-item label="店铺名称">
               <el-input v-model="shopDetailFormData.shopName"></el-input>
            </el-form-item>
            <!-- 店铺地址 -->
            <el-form-item label="店铺地址">
               <el-input type="textarea" v-model="shopDetailFormData.address"></el-input>
            </el-form-item>
            <!-- 营业时间 -->
            <el-form-item label="营业时间">
               <el-input type="textarea" v-model="shopDetailFormData.businessHours"></el-input>
            </el-form-item>
            <el-form-item style="text-align:center">
               <el-button @click="back">取消</el-button>
               <el-button type="primary" @click="save">保存</el-button>
            </el-form-item>
         </el-form>
      </div>
   </div>
</template>

<script>
   import { getLikeList, addOrUpdate, deltLikeList, likeDetail, addLikeDetail, editLikeDetail } from '@/api/product/like'
   export default {
      name: 'Like',
      data() {
         return {
            likeList: [], // 猜你喜欢数据
            dialogFormVisible: false, // 控制对话框中表单是否开启
            shopFormData: { // 猜你喜欢表单信息
               shopName: '', // 商品名称
               defaultPic: '', // 商品图片
               dealGroupTitle: '', // 商品简介
               dealgroupPrice: '', // 商品现价
               marketPrice: '', // 商品原价
               salesdesc: '', // 已售
            },
            formLabelWidth: '100px', // 表单域标签的宽度
            page: 1, // 默认页码
            pageSize: 3, // 每页的条数
            total: 0, // 总的条数
            showLikeList: true, // 控制展示商品列表或商品详情
            shopDetailFormData: { // 商品详情表单信息
               title: "", // 轮播图标题
               defaultPic: {},
               shopName: "", // 店名
               address: "", //地址
               // imgs: [], 
               businessHours: "", //营业时间
               foodList: [ // 团购详情写死
                  { name: '抢购芒果大虾卷', count: '1份', price: '38元' }
                  ],
               shopPower: 45, // 评分写死
               totalShopNum: 33, // 写死
            },
            id: '', // 商品详情id
            imgList: [], // 商品详情轮播图
            dialogImageUrl: '', // 图片预览的地址
            dialogVisible: false, // 是否开启图片预览
            flag: true // 控制调用添加或者修改的标识符true为修改，false为添加
         }
      },
      mounted() {
         this.getLikeList();
      },
      methods: {
         // 获取商品列表数据
         async getLikeList(page = 1) {
            // 更新页码
            this.page = page
            const result = await getLikeList(this.page, this.pageSize)
            if (result.code !== 200) {
               this.$message.error('出错了哦，刷新试试');
               return
            }
            this.likeList = result.result
            this.total = result.total
         },
         // 修改当前页显示商品条数
         handleSizeChange(pageSize) {
            this.pageSize = pageSize // 改变每次显示的条数
            this.getLikeList() // 重新获取当前的列表数据
         },
         // 添加商品
         addShopList() {
            // 初始化数据
            this.shopFormData = {
               shopName: '', // 商品名称
               defaultPic: '', // 商品图片
               dealGroupTitle: '', // 商品简介
               dealgroupPrice: '', // 商品现价
               marketPrice: '', // 商品原价
               salesdesc: '', // 已售
            }
            this.dialogFormVisible = true
         },
         // 商品图片上传成功
         handleAvatarSuccess(res, file) {
            if (res.code === 200) {
               // 保存图片地址
               this.shopFormData.defaultPic = res.data
            }
         },
         // 确定操作
         async handleAddShopList() {
            const data = {
               id: this.shopFormData.id,
               data: this.shopFormData
            }
            const result = await addOrUpdate(data)
            // 操作失败
            if (result.code !== 200) {
               this.$message.error('操作失败')
               return
            }
            // 成功
            this.$message.success('操作成功')
            // 刷新页面
            this.getLikeList()
            // 关闭对话框
            this.dialogFormVisible = false
         },
         // 修改商品
         changeShop(shopInfo) {
            // 修改formDate数据为当前行数据
            this.shopFormData = { ...shopInfo }
            // 开启会话框
            this.dialogFormVisible = true
         },
         // 删除商品
         delShop(id) {
            this.$confirm('确定删除该商品么?', '提示', {
               confirmButtonText: '确定',
               cancelButtonText: '取消',
               type: 'warning'
            }).then(async () => {
               // 调用接口删除商品
               const result = await deltLikeList(id)
               if (result.code !== 200) {
                  // 提示错误信息
                  this.$message.error(result.msg)
                  return
               }
               // 提示成功
               this.$message({
                  type: 'success',
                  message: '删除成功!'
               });
               // 刷新页面
               this.getLikeList(this.likeList.length == 1 && this.page > 1 ? this.page - 1 : this.page)
            }).catch(() => {
               this.$message({
                  type: 'info',
                  message: '已取消删除'
               });
            });
         },
         // 添加商品详情
         async addShopDetail(id) {
            // 展示商品详情页面
            this.showLikeList = !this.showLikeList
            // 获取商品详情
            const result = await likeDetail(id)
            if (result.code !== 200) {
               this.$message.error('出错了哦，刷新试试');
               return
            }
            // 保存id
            this.id = id
            // 保存商品详情数据
            if (result.likeDetail[0]) {
               this.shopDetailFormData = result.likeDetail[0]
               this.flag = true

               result.likeDetail[0].imgs.forEach((item) => {
                  item.name = item.imgName
                  item.url = item.imgUrl
               })
               this.imgList = result.likeDetail[0].imgs
            } else {
               this.flag = false
            }
         },
         // 商品详情图片上传成功
         likeDetailSuccess(res, file, fileList) {
            // 保存图片地址
            this.imgList = fileList
         },
         // 商品封面图片上传成功
         imageSuccess(res, file, fileList) {
            // 保存图片地址
            this.shopDetailFormData.defaultPic.imgUrl = res.data
         },
         // 删掉封面图片的回调函数
         handleRemoveImg(file, fileList) {
            // fileList是一个数组,移除图片后的数组
            this.imgList = file
         },
         // 删掉图片的回调函数
         handleRemove(file, fileList) {
            // fileList是一个数组,移除图片后的数组
            this.imgList = fileList
         },
         // 预览图片
         handlePictureCardPreview(file) {
            this.dialogImageUrl = file.url // 设置预览图片的地址
            this.dialogVisible = true // 是否开启预览的效果
         },
         // 保存
         async save() {
            const { id, imgList, shopDetailFormData } = this
            shopDetailFormData.imgs = imgList
            const likeDetail = {
               id,
               shopDetailFormData
            }
            if (this.flag) { //修改
               let add = await editLikeDetail(likeDetail)
               if (add.code == 200) {
                  this.$message.success('修改成功')
               } else {
                  this.$message.error(result.msg)
               }
            } else { // 添加
               let update = await addLikeDetail(likeDetail)
               if (update.code == 200) {
                  this.$message.success('添加成功')
               } else {
                  this.$message.error(result.msg)
               }
            }
            this.showLikeList = !this.showLikeList
            getLikeList(1, 3)

         },
         back() {
            this.showLikeList = !this.showLikeList
            getLikeList(1, 3)
         }
      },
   }
</script>

<style secped>
   /*  商品列表盒子 */
   .likeList {
      margin: 0;
      padding: 20px;
      font-size: 0;
   }

   /* 图片部分相关样式 */
   .avatar-uploader .el-upload {
      border: 1px dashed #d9d9d9;
      border-radius: 6px;
      cursor: pointer;
      position: relative;
      overflow: hidden;
   }

   .avatar-uploader .el-upload:hover {
      border-color: #409eff;
   }

   .avatar-uploader-icon {
      font-size: 28px;
      color: #8c939d;
      width: 178px;
      height: 178px;
      line-height: 178px;
      text-align: center;
   }

   .avatar {
      width: 178px;
      height: 178px;
      display: block;
   }

   .likeDetail {
      padding: 40px;
   }
</style>